<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="sys_name"
        clearable
        label="系统名称"
        placeholder="请输入系统名称"
        required
      />

      <van-field
        v-model="description"
        label="系统描述"
        type="textarea"
        clearable
        placeholder="请输入系统描述"
        rows="1"
        autosize
      />
    </van-cell-group>
    <van-collapse v-model="activeName" accordion>
      <van-collapse-item title="系统开始时间" name="1">
        <van-datetime-picker
          v-model="start_time"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
        />

      </van-collapse-item>
      <van-collapse-item title="系统结束时间" name="2">
        <van-datetime-picker
          v-model="end_time"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-collapse-item>
    </van-collapse>
    <van-button size="large" style="width: 80%; margin: 10%;" @click="submitInfo">创建系统</van-button>
  </div>
</template>

<script>
  import router from '@/router/index'
  import {Field, CellGroup, DatetimePicker, Collapse, CollapseItem, Button, Toast} from 'vant';

  export default {
    name: "TemplateBasics",
    components: {
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [DatetimePicker.name]: DatetimePicker,
      [Collapse.name]: Collapse,
      [CollapseItem.name]: CollapseItem,
      [Button.name]: Button,
      [Toast.name]: Toast,
    },
    props: ["type_id", "type_name"],
    data() {
      return {
        sys_name: "",
        description: "",
        minHour: 10,
        maxHour: 20,
        minDate: new Date(),
        maxDate: new Date(2020, 0, 1),
        start_time: new Date(),
        end_time: new Date(),
        activeName: '1',
        path: ['DocumentExam','/DocumentScore'],
      }
    },
    methods: {
      submitInfo() {
        let _this = this;
        let token = _this.getCookie("token");
        if (_this.sys_name === "") {
          Toast.fail("系统名称不能为空");
          return;
        }
        let data = _this.$qs.stringify({
          'type': _this.type_id,
          'sys_name': _this.sys_name,
          'description': _this.description,
          'start_time': _this.start_time,
          'end_time': _this.end_time
        });
        _this.$http.post(_this.apiUrl("user/users/newSystem"), data, {headers: {'token': token}})
          .then((res) => {
            Toast.success("创建" + _this.type_name + ': ' + _this.sys_name + " 成功");
            console.log(res.data);
            router.push({
              path: _this.path[_this.type_id-1],
              query: {
                sid: res.data.data.id,
                type_id: _this.type_id,
                sys_name: _this.sys_name
              }
            })
          });
      },
      changeStyle() {
        let v = document.getElementsByClassName("van-picker__toolbar");
        v[0].style.display = "none";
        v[1].style.display = "none";
      },
    },
    mounted() {
      let _this = this;
      _this.changeStyle();
    }
  }
</script>

<style scoped>
</style>
